<template>
    <div>
        <h3>显示</h3>

        <input type="text" placeholder="房间名称" v-model="cx.hname">
        <input type="checkbox" value="null" v-model="cx.htype">选中为启用
        <input type="button" value="查询" @click="list">
        <input type="button" value="重置" @click="cz">

        <table class="table">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>房间名称</td>
                    <td>价格</td>
                    <td>房间数量</td>
                    <td>状态</td>
                    <td>房间号</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>{{ a.Hid }}</td>
                    <td>{{ a.Hname }}</td>
                    <td>￥{{ a.Hmoney }}</td>
                    <td>{{ a.Homenum }}</td>
                    <td>{{ a.Htype==true?"启用":"禁用" }}</td>
                    <td>{{ a.Homename }}</td>
                    <td>
                        <input type="button" value="删除" @click="dele(a.Hid)">
                        <input type="button" value="修改" @click="update(a.Hid)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="page(1)">
        <input type="button" value="上一页" @click="page(2)">
        <input type="button" v-for="a in suan.pagecount" :value="a" @click="uppage(a)">
        <input type="button" value="下一页" @click="page(3)">
        <input type="button" value="尾页" @click="page(4)">
        一共{{suan.pagecount}}页，当前第{{cx.pageindex}}页，一共{{suan.count}}条，每页显示{{cx.pagesize}}条
        <span>
            <input type="number" v-model="tt" @change="tiao(tt)">
        </span>
    </div>
</template>

<script setup lang="ts">

import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router=useRouter()

const tt=ref()

const data=ref( [
    {
      "Hid": 0,
      "Hname": "",
      "Hmoney": "",
      "Homenum": 0,
      "Htype": true,
      "Homename": "",
      "Isdelete": false
    }
  ])

  //文本框跳转
const tiao=(a:any)=>{
    cx.value.pageindex=a
    list()
}
  //翻页
const page=(val:any)=>{
    if(val==1)
    {
        cx.value.pageindex=1
        list()
    }
    if(val==2)
    {
        if(cx.value.pageindex>1)
        {
            cx.value.pageindex-=1
            list()
        }
    }
    if(val==3)
    {
        if(cx.value.pageindex<suan.value.pagecount)
        {
            cx.value.pageindex+=1
            list()
        }
    }
    if(val==4)
    {
        cx.value.pageindex=suan.value.pagecount
        list()
    }
}

const cz=()=>{
    cx.value.pageindex=1,
    cx.value.pagesize=3,
    cx.value.hname="",
    cx.value.htype=null
    list()
}

//页码翻页
const uppage=(a:any)=>{
    cx.value.pageindex=a
    list()
}

const cx=ref({
    pageindex:1,
    pagesize:3,
    hname:"",
    htype:null
})

const suan=ref({
    count:0,
    pagecount:0
})

const list=()=>{
    axios.get("https://localhost:7056/api/House/List",{params:cx.value}).then(res=>{
        data.value=res.data.list

        suan.value.count=res.data.count
        suan.value.pagecount=Math.ceil(suan.value.count/cx.value.pagesize)
    })
}

onMounted(() => {
    list()
})

const dele=(val:any)=>{
    if(confirm("确认删除吗？"))
    {
        axios.delete("https://localhost:7056/api/House/Delete",{params:{id:val}}).then(res=>{
        if(res.data>0)
        {
            alert("逻辑删除成功");
            list()
        }
        else
        {
            alert("逻辑删除失败");
        }
    })
    }
}

const update=(val:any)=>{
    router.push({path:"/update",query:{id:val}})
}


</script>

<style scoped>

</style>